<template>
  <div>
    <!-- 订单模块下属六个页面
  1.订单信息 2.超时订单 3.进出信息 4.订单评论(本页面) 5.订单日志 6.物业流水 -->
    <div style="padding-bottom:5px">
      <el-select v-model="isReply" placeholder="无回复/有回复" @change="showComments2">
        <el-option value="0" label="无回复"></el-option>
        <el-option value="1" label="有回复"></el-option>
      </el-select>
      &nbsp;
      <el-button @click="showWindow">查询</el-button>
    </div>

    <el-table :data="page.records">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户信息Id">
              <span>{{props.row.userInfoId}}</span>
            </el-form-item>
            <el-form-item label="用户电话">
              <span>{{ props.row.userInfoTel }}</span>
            </el-form-item>
            <el-form-item label="评论内容">
              <span>{{ props.row.commentInfo }}</span>
            </el-form-item>
            <el-form-item label="回复内容" v-if="isReply=='1'">
              <span>{{props.row.replyInfo}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderInfoNum">
      </el-table-column>
      <el-table-column
        label="评论时间"
        prop="commentTime">
      </el-table-column>
      <el-table-column
        label="评论分数"
        prop="commentScore">
      </el-table-column>
      <el-table-column
        label="用户姓名"
        prop="userInfoName">
      </el-table-column>
      <el-table-column
        label="回复时间"
        prop="replyTime"
        v-if="isReply=='1'">
      </el-table-column>
      <el-table-column
        label="操作" v-if="isReply=='0'">
        <template slot-scope="scope">
          <el-button type="text" @click="showWindow2(scope.row)">回复评论</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding-top:5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[3,5,7]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="window">
      <div style="padding-bottom:10px">
      <el-input placeholder="请输入用户信息Id" style="width:200px" v-model="commentSelect.userInfoId"></el-input>
      &nbsp;
      <el-input placeholder="请输入订单编号" style="width:200px" v-model="commentSelect.orderInfoNum"></el-input>
      </div>
      <div style="padding-bottom:10px">
      <el-date-picker v-model="commentSelect.startTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择开始时间"></el-date-picker>
      &nbsp;
      <el-date-picker v-model="commentSelect.endTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择结束时间"></el-date-picker>
      </div>
      <el-select v-model="commentSelect.commentScore" placeholder="请选择评分">
        <el-option value="Good" label="Good"></el-option>
        <el-option value="Bad" label="Bad"></el-option>
        <el-option value="OK" label="OK"></el-option>
      </el-select>
      <div style="padding-top:10px">
        <el-button @click="window=false">取 消</el-button>
        <el-button @click="showComments">查 询</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="window2">
      <el-input placeholder="请输入回复内容" v-model="reply.replyInfo"></el-input>
      <div style="padding-top:10px">
        <el-button @click="window2=false">取 消</el-button>
        <el-button @click="addReply">回 复</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrderComment',
  data () {
    return {
      page: [],
      window: false,
      window2: false,
      reply: {
        replyInfo: "",
        commentId: ""
      },
      commentSelect:{
        userInfoId: "",
        orderInfoNum: "",
        startTime: "",
        endTime: "",
        commentScore: ""
      },
      isReply: "0",
      commentSelected:{
        userInfoId: "",
        orderInfoNum: "",
        startTime: "",
        endTime: "",
        commentScore: ""
      }
    }
  },
  methods:{
    showWindow(){
      this.commentSelect.userInfoId = ""
      this.commentSelect.orderInfoNum = ""
      this.commentSelect.startTime = ""
      this.commentSelect.endTime = ""
      this.commentSelect.commentScore = ""
      this.window = true
    },
    showComments(){
      this.commentSelected.userInfoId = this.commentSelect.userInfoId
      this.commentSelected.orderInfoNum = this.commentSelect.orderInfoNum
      this.commentSelected.startTime = this.commentSelect.startTime
      this.commentSelected.endTime = this.commentSelect.endTime
      this.commentSelected.commentScore = this.commentSelect.commentScore
      this.showCommentsProper("","")
      this.window = false
    },
    showComments2(){
      this.showCommentsProper("","")
    },
    showCommentsProper(pageNum,pageSize){
      this.$http.get("/order/orderComment/findComment.certified",{
        params:{
          pageNum:pageNum==""?1:pageNum,
          pageSize:pageSize==""?3:pageSize,
          startTime: this.commentSelected.startTime,
          endTime: this.commentSelected.endTime,
          userInfoId: this.commentSelected.userInfoId,
          orderInfoNum: this.commentSelected.orderInfoNum==""?null:this.commentSelected.orderInfoNum,
          commentScore: this.commentSelected.commentScore==""?null:this.commentSelected.commentScore,
          isReply: this.isReply
        }
      }).then(resp=>{　
        if(resp.data.flag) this.page = resp.data.data
        else this.$alert(resp.data.message)　　
      })
    },
    handleSizeChange(val) {
      this.showCommentsProper("",val)
    },
    handleCurrentChange(val) {
      this.showCommentsProper(val,this.page.size)
    },
    showWindow2(comment){
      this.reply.replyInfo = ""
      this.reply.commentId = comment.commentId
      this.window2 = true
    },
    addReply(){
      this.$http.put("/order/orderComment/replyComment.certified",this.reply).then(resp=>{
        if(resp.data.flag){
          this.$alert(resp.data.message).then(()=>{
              this.window2 = false
              if(this.page.current!=1
                &&this.page.current==this.page.pages
                &&this.page.total==(this.page.current-1)*this.page.size+1)
                this.page.current=this.page.current-1
              this.showCommentsProper(this.page.current,this.page.size)
          })
        }else this.$alert(resp.data.message)
      })
    }
  },
  created(){
    this.showCommentsProper("","")
  }
}
</script>

<style>
</style>
